<template>
  <Card size="small" :bordered="false" class="w-4/4 w-full !mt-0 !rounded-lg !p-6px h-full">
    <template #title>
      <div class="flex items-center text-xl font-semibold">
        <div>开始使用</div>
      </div>
    </template>
    <div class="m-10px overflow-y-auto min-h-350px max-h-650px">
      <div
        ><div
          v-if="activeKey != 1"
          @click="activeKeyget(1)"
          class="text-base cursor-pointer hover:bg-gray-500/5 hover:p-12px hover:rounded-xl"
          >1、创建设备</div
        >
        <div class="bg-gray-500/5 px-10px py-15px rounded-xl" v-if="activeKey == 1">
          <div class="flex justify-between items-center">
            <div class="text-base">1、创建设备</div>
            <a-button type="link" class="mr-15px"> 设备 </a-button>
          </div>
          <div class="m-20px text-gray-500"
            >让我们通过UI将第一台设备预配到平台。请按照有关如何执行此操作的文档进行操作:</div
          >
          <div class="mx-20px mt-20px mb-15px"
            ><a-button type="default" preIcon="mdi:page-next-outline"> 如何创建设备 </a-button></div
          >
        </div></div
      >

      <div class="mt-20px">
        <div
          v-if="activeKey != 2"
          @click="activeKeyget(2)"
          class="text-base cursor-pointer hover:bg-gray-500/5 hover:p-12px hover:rounded-xl"
          >2、连接设备</div
        >
        <div class="bg-gray-500/5 px-10px py-15px rounded-xl" v-if="activeKey == 2">
          <div class="flex justify-between items-center">
            <div class="text-base">2、连接设备</div>
          </div>
          <div class="m-20px text-gray-500"
            >若要连接设备，需要获取设备凭据。我们建议使用默认的自动生成的凭据，即本指南的访问令牌。</div
          >
          <div class="mx-20px mt-20px mb-15px text-gray-500"
            ><ul>
              <li>转到设备表</li>
              <li>单击设备行以打开设备详细信息</li>
              <li>按下“复制访问令牌”按钮</li>
            </ul></div
          >
          <div class="mx-20px mt-20px mb-15px text-gray-500"
            >使用简单的命令通过HTTP发布数据。不要忘记将$ACCESS_TOKEN 替换为设备访问令牌：</div
          >
          <div class="mx-20px mt-20px p-15px border-1 border-gray-500/50 rounded-xl">
            <EllipticTabs :tablist="tabsant" @change="changeTabs" />
            <div class="m-10px text-gray-500">安装适用于 Ubuntu 的 cURL：</div>
            <div class="m-10px bg-gray-500/15 px-15px py-5px text-gray-500 rounded-lg"
              >sudo apt-get install curl：</div
            >
            <div class="m-10px text-gray-500">将 $ACCESS_TOKEN 替换为设备的令牌：</div>
            <div class="m-10px bg-gray-500/15 px-15px py-5px text-gray-500 rounded-lg"
              >curl -v -X POST -d "{\"temperature\": 25}" --header "Content-Type:application/json"
            </div>
          </div>
          <div class="mx-20px mt-10px text-gray-500">您还可以使用其他协议，例如MQTT、CoAP</div>
          <div class="mx-20px mt-15px text-gray-500">请按照有关如何执行此操作的文档进行操作：</div>
          <div class="mx-20px mt-20px mb-15px"
            ><a-button type="default" preIcon="mdi:page-next-outline"> 如何连接设备 </a-button></div
          >
        </div>
      </div>
      <div class="mt-20px"
        ><div
          v-if="activeKey != 3"
          @click="activeKeyget(3)"
          class="text-base cursor-pointer hover:bg-gray-500/5 hover:p-12px hover:rounded-xl"
          >3、创建仪表盘</div
        >
        <div class="bg-gray-500/5 px-10px py-15px rounded-xl" v-if="activeKey == 3">
          <div class="flex justify-between items-center">
            <div class="text-base">3、创建仪表盘</div>
            <a-button type="link" class="mr-15px"> 仪表盘 </a-button>
          </div>
          <div class="m-20px text-gray-500">创建仪表盘以可视化来自资产、设备等实体的数据。</div>
          <div class="m-20px text-gray-500">请按照有关如何执行此操作的文档进行操作：</div>
          <div class="mx-20px mt-20px mb-15px"
            ><a-button type="default" preIcon="mdi:page-next-outline">
              如何创建仪表盘
            </a-button></div
          >
        </div>
      </div>
      <div class="mt-20px"
        ><div
          v-if="activeKey != 4"
          @click="activeKeyget(4)"
          class="text-base cursor-pointer hover:bg-gray-500/5 hover:p-12px hover:rounded-xl"
          >4、配置告警规则</div
        >
        <div class="bg-gray-500/5 px-10px py-15px rounded-xl" v-if="activeKey == 4">
          <div class="flex justify-between items-center">
            <div class="text-base">4、配置告警规则</div>
            <a-button type="link" class="mr-15px"> 告警规则 </a-button>
          </div>
          <div class="m-20px text-gray-500">当温度达到25℃时，让我们发出警报。</div>
          <div class="m-20px text-gray-500">请按照有关如何执行此操作的文档进行操作：</div>
          <div class="mx-20px mt-20px mb-15px"
            ><a-button type="default" preIcon="mdi:page-next-outline">
              如何创建仪表盘
            </a-button></div
          >
        </div>
      </div>
      <div class="mt-20px"
        ><div
          v-if="activeKey != 5"
          @click="activeKeyget(5)"
          class="text-base cursor-pointer hover:bg-gray-500/5 hover:p-12px hover:rounded-xl"
          >5、创建警报</div
        >
        <div class="bg-gray-500/5 px-10px py-15px rounded-xl" v-if="activeKey == 5">
          <div class="flex justify-between items-center">
            <div class="text-base">5、创建警报</div>
          </div>
          <div class="m-20px text-gray-500">要触发警报，请发送26℃或更高的新遥测值。</div>
          <div class="m-20px text-gray-500">将$ACCESS_TOKN替换为设备的令牌：</div>
          <div class="m-10px bg-gray-500/15 px-15px py-5px text-gray-500 rounded-lg"
            >curl -v -X POST -d "{\"temperature\": 25}" --header "Content-Type:application/json"
          </div>
          <div class="mx-20px text-gray-500 mt-10px">请按照有关如何执行此操作的文档进行操作：</div>
          <div class="mx-20px mt-20px mb-15px"
            ><a-button type="default" preIcon="mdi:page-next-outline"> 如何创建警报 </a-button></div
          >
        </div>
      </div>
      <div class="mt-20px"
        ><div
          v-if="activeKey != 6"
          @click="activeKeyget(6)"
          class="text-base cursor-pointer hover:bg-gray-500/5 hover:p-12px hover:rounded-xl"
          >6、创建客户和共享仪表盘</div
        >
        <div class="bg-gray-500/5 px-10px py-15px rounded-xl" v-if="activeKey == 6">
          <div class="flex justify-between items-center">
            <div class="text-base">4、配置告警规则</div>
            <a-button type="link" class="mr-15px"> 告警规则 </a-button>
          </div>
          <div class="m-20px text-gray-500"
            >通过创建最终用户仪表盘，客户用户只能看到自己的设备，而来自其他客户的数据将被隐藏。</div
          >
          <div class="m-20px text-gray-500">请按照有关如何执行此操作的文档进行操作：</div>
          <div class="mx-20px mt-20px mb-15px"
            ><a-button type="default" preIcon="mdi:page-next-outline">
              如何创建创建客户和共享仪表盘
            </a-button></div
          >
        </div></div
      >
    </div>
    <div class="flex items-center justify-center mt-40px"
      ><a-button type="primary" class="ml-10px" preIcon="mdi:page-next-outline">
        完成
      </a-button></div
    >
  </Card>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { Card } from 'ant-design-vue';
  import EllipticTabs from './EllipticTabs.vue';

  defineProps({
    datalist: {
      type: Object,
    },
  });

  const activeKey = ref<Number>(1);
  const tabsant = ref<any>([
    { title: 'Ubuntu', id: 1 },
    { title: 'MacOS操作系统', id: 2 },
    { title: 'window操作系统', id: 3 },
  ]);

  const activeKeyget = (e: Number) => {
    activeKey.value = e;
  };
  const changeTabs = (_e: Number) => {};
</script>
